<template>
    <div class="wrap">
        <div class="header">
            <Header/>
        </div>
        <div class="menu">
             <Menu/>
        </div>
        <div class="page">
            <a-tabs default-active-key="1" @change="tabsChange" >
                <a-tab-pane key="1" tab="案件管理" :forceRender="true">
                    <CaseManager ref="caseManager" />
                </a-tab-pane>
                <a-tab-pane key="2" tab="文档管理" :forceRender="true">
                    <FileManager ref="fileManager" />
                </a-tab-pane>
            </a-tabs>
        </div>
    </div>
</template>

<script>
import CaseManager from '@/components/CaseManager'
import FileManager from '@/components/FileManager'
import Header from '@/components/Header'
import Menu from '@/components/Menu'

export default {
    components:{
        CaseManager,
        FileManager,
        Header,
        Menu
    },
    methods:{
        tabsChange(activeKey){
            if(activeKey == "1"){
                this.$refs.caseManager.loadCase()
            }else{
                this.$refs.fileManager.getFile()
                this.$refs.fileManager.getCart()
            }
        }
    }
    
}
</script>

<style lang="stylus" scoped>
.wrap
    height: 100%;
    overflow: auto;
    padding: 10px 10px 20px 10px
    .header
        width: 1000px
        max-width 1000px
        margin: 0px auto;
    .menu
       width: 1000px
       max-width 1000px  
       margin: 0px auto;   
    .page
        width: 1000px;
        max-width 1000px
        margin: 0px auto;
        border-radius 8px
        padding: 20px
        background: #fff 
        min-height: 600px
        box-shadow: 0 3px 15px 0 rgba(0, 0, 0, 0.1)
</style>